<template>
  <header>
    <div class="banxin tanxin head">
      <div class="head_l">
        <img class="logo" src="../assets/images/logo1.jpg" alt="" />
        <b>网易云音乐</b>
      </div>
      <ul>
        <li @click="$router.push('/')" :class="{ active: $route.path == '/' }">
          发现音乐
        </li>
        <li
          @click="$router.push('/wodeyy')"
          :class="{ active: $route.path == '/wodeyy' }"
        >
          我的音乐
        </li>
        <li>关注</li>
        <li>商城</li>
        <li>音乐人</li>
        <li>下载客户端</li>
      </ul>
      <div class="head_r">
        <input
          type="text"
          placeholder="音乐/视频/电台/用户"
          v-model="Valtxt"
          @click="sousuo"
        />
        <div>创作者中心</div>
        <span v-if="$store.state.huan" @click="Gologin">登录</span>
        <img v-else class="touxiang" src="../assets/images/logo.png" alt="" />
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return { ErweimaKey: "", Valtxt: "" };
  },
  methods: {
    Gologin() {
      this.$store.commit("chageLogin", true);
      let Title = {
        content: "请先登录",
        lcon: "info",
      };
      this.$store.dispatch("AsyncToast", Title);
    },
    sousuo() {
      if (this.Valtxt.trim() == "") {
        return;
      } else {
        this.$router.push("/sousuo");
        this.$store.commit("chagesousuo", this.Valtxt);
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.logo {
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
.touxiang {
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
header {
  height: 70px;
  background-color: @black;
}
.head {
  .head_l {
    height: 70px;
    display: flex;
    img {
      margin-top: 20px;
      padding-right: 10px;
    }
    b {
      line-height: 70px;
      color: white;
    }
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      width: 100px;
      height: 70px;
      color: white;
      line-height: 70px;
      cursor: pointer;
      text-align: center;
      &.active {
        background-color: rgb(92, 82, 82);
      }
      &:hover {
        background-color: rgb(92, 82, 82);
      }
    }
  }
  .head_r {
    display: flex;
    color: white;
    input {
      width: 160px;
      height: 33px;
      border-radius: 20px 20px 20px 20px;
      margin: auto;
      padding-left: 10px;
      outline-style: none;
    }
    div {
      width: 100px;
      height: 33px;
      margin: auto;
      text-align: center;
      margin-left: 15px;
      line-height: 33px;
      border-radius: 20px 20px 20px 20px;
      box-sizing: border-box;
      &:hover {
        border: 1px solid #ccc;
      }
    }
    span {
      margin: auto;
      margin-left: 20px;
      color: #ccc;
      cursor: pointer;
    }
    img {
      margin: auto;
      margin-left: 20px;
    }
  }
}
</style>